<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>XMLHttpRequest</title>
	<style>
		*{
			margin:0;
			padding:0;
			border: 0
		}
		input{
			width: 20%;
			height: 50px;
			margin-left:100px;

		}
	</style>
</head>
<body>
	<input type="button" value="发送">
	<p>这里显示</p>
	<img src="" alt="">
	<script>
		var count = 0
		const inp = document.getElementsByTagName('input')[0]
		const sho = document.getElementsByTagName('p')[0]
		const ig = document.getElementsByTagName('img')[0]
		inp.onclick= function(){
			getRecommend().then(function(res){
				console.log(res.data)
				console.log(sho)
				sho.innerText = res.data.radioList[0].Ftitle
				ig.src = res.data.radioList[0].picUrl
			})
		}
		
		// 插件内容
		function originJsonp(url, opts, fn){
		  if ('function' == typeof opts) {
		    fn = opts;
		    opts = {};
		  }
		  if (!opts) opts = {};

		  var prefix = opts.prefix || '__jp';

		  // use the callback name that was passed if one was provided.
		  // otherwise generate a unique name by incrementing our counter.
		  var id = opts.name || (prefix + (count++));

		  var param = opts.param || 'callback';
		  var timeout = null != opts.timeout ? opts.timeout : 60000;
		  var enc = encodeURIComponent;
		  var target = document.getElementsByTagName('script')[0] || document.head;
		  var script;
		  var timer;


		  if (timeout) {
		    timer = setTimeout(function(){
		      cleanup();
		      if (fn) fn(new Error('Timeout'));
		    }, timeout);
		  }

		  function cleanup(){
		    if (script.parentNode) script.parentNode.removeChild(script);
		    // window[id] = noop;
		    if (timer) clearTimeout(timer);
		  }

		  function cancel(){
		    if (window[id]) {
		      cleanup();
		    }
		  }

		  window[id] = function(data){
		    // debug('jsonp got', data);
		    cleanup();
		    if (fn) fn(null, data);
		  };

		  // add qs component
		  url += (~url.indexOf('?') ? '&' : '?') + param + '=' + enc(id);
		  url = url.replace('?&', '?');

		  // debug('jsonp req "%s"', url);

		  // create script
		  script = document.createElement('script');
		  script.src = url;
		  target.parentNode.insertBefore(script, target);

		  return cancel;
		}
		// 自定义jsonp方法
		// 
		function jsonp (url, data, option) {
		  // url地址和参数拼接成新url加参数形式
		  /* 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'+'?'+'&g_tk=5381'+'&outCharset=utf-8'
				
		  */
		  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
		  // es6 Promise对象
		  return new Promise((resolve, reject) => {
		    originJsonp(url, option, (err, data) => {
		      if (!err) {
		        resolve(data)
		      } else {
		        reject(err)
		      }
		    })
		  })
		}

		// 处理参数
		/* 
			data = {
		   		g_tk: 5381,
		      	inCharset: 'utf-8',
		      	outCharset: 'utf-8',
		      	notice: 0,
		      	format: 'jsonp'
		  		platform: 'h5',
		     	uin: 0,
		     	needNewCode: 1
		   }
		*/
		function param (data) {
		  let url = ''
		  for (var k in data) {
		  	// 取到每一项的值
		    let value = data[k] !== undefined ? data[k] : ''
		    // url=''+'&g_tk=5381'+'&outCharset=utf-8'
		    url += `&${k}=${encodeURIComponent(value)}`
		  }
		  // url = '&g_tk=5381'+'&outCharset=utf-8'
		  return url ? url.substring(1) : ''
		}
	
		// ajax请求
		// getRecommend函数的功能，一个是把url和参数初步“arrange”放入进来，二个就是
		// 调用自定义方法，jsonp()
		function getRecommend () {
		  const commonParams = {
			g_tk: 5381,
			inCharset: 'utf-8',
			outCharset: 'utf-8',
			notice: 0,
			format: 'jsonp'
		  }

		  const options = {
			param: 'jsonpCallback'
		  }

		  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

		  // arrange一些对象成一个对象
		  const data = Object.assign({}, commonParams, {
		    platform: 'h5',
		    uin: 0,
		    needNewCode: 1
		  })

		 //  data = {
		 //  	g_tk: 5381,
		 //     inCharset: 'utf-8',
		 //     outCharset: 'utf-8',
		 //     notice: 0,
		 //     format: 'jsonp'
		 // 	platform: 'h5',
		 //    	uin: 0,
		 //    	needNewCode: 1
		 //  }
		 /*	options = {
				param: 'jsonpCallback'
		 }*/ 
		  return jsonp(url, data, options)
		}



		
	</script>
</body>
</html>